<template>
    <div class="find">
        <!-- 搜索 -->
       <search>
           <template #sm-inp>
                <input type="text" placeholder="请输入关键词..." @focus="toSearch">
           </template>
       </search>
        <div class="hots">
            <p class="title">
                冲浪热点
                <span class="update">2021-11-10 12:25更新</span>
            </p>
            <div class="hot-box">
                <div class="hot" v-for="item,index in hotList" :key="item.id" @click="addClick(item.keyword)">
                    <div class="hl">{{index+1}}</div>
                    <div class="hr">
                        <p class="h-tit">{{item.keyword}}</p>
                        <p>{{item.summary}}</p>
                    </div>
                </div>
            </div>
            <p class="more" @click="toMore">查看更多</p>
        </div>
    </div>
</template>
<script>
import search from "../components/hot-search.vue"
import {mapState,mapMutations} from "vuex"
export default {
    name:"Find",
    components:{
        search
    },
    data(){
        return{
        }
    },
    methods:{
        ...mapMutations(["addHistory"]),
        toMore(){
            this.$router.push({path:"/more"})
        },
        toSearch(){
            this.$router.push({path:"/findSearch"})
        },
        addClick(value){
            this.$store.commit('entry/searchEntry',value)
            this.addHistory(value)
            this.$router.push({path:"/findResult"})
            this.entry.inpKeyword = value;
        }
    },
    computed:{
        ...mapState(["entry"]),
        hotList(){
            return this.entry.hotData.slice(0,4);
        }
    }
}
</script>
<style lang="scss" scoped>
.hots{
    padding: 20px 20px;
    margin-top: 50px;
    .title{
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        .update{
            font-size: 14px;
            font-weight: 500;
            color: #888;
            margin-left: 10px;
        }
    }
    .hot-box{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        .hot{
            width: 48%;
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            .hl{
                font-size: 20px;
                color: rgb(223, 184, 85);
                font-weight: bold;
                margin-right: 10px;
            }
            .hr{
                width: 100%;
                p{
                    width: 95%;
                    font-size: 14px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    color: #888;
                }
                .h-tit{
                    color: #333;
                    margin-bottom: 5px;
                }
            }
        }
    }
    .more{
        color: rgb(218, 201, 53);
        font-weight: bold;
        cursor: pointer;
        font-size: 14px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
}
</style>